<template>
  <div calss="EditoBox">
    <headerComponent title="编辑资料"></headerComponent>
    <div class="container">
      <div class="bg">
        <img
          class="avatar"
          :src="$axios.defaults.baseURL + list.head_img"
          v-if="list.head_img"
        />
        <img class="avatar" src="@/assets/logo.png" alt="" v-else />
      </div>
      <div class="bg-mask"></div>
      <div class="content">
        <img
          class="avatar"
          :src="$axios.defaults.baseURL + list.head_img"
          v-if="list.head_img"
        />
        <img class="avatar" src="@/assets/logo.png" alt="" v-else />
      </div>
    </div>
    <options
      text="呢称"
      :info="list.nickname"
      @combut="nickname = true"
    ></options>
    <options text="密码" info="********" @combut="password = true"></options>
    <options
      text="性别"
      info="女"
      v-if="list.gender == 0"
      @combut="gunder = true"
    ></options>
    <options text="性别" info="男" v-else @combut="gunder = true"></options>
    <van-uploader :after-read="afterRead" />
    <!-- 以下放置弹出框 -->
    <!-- 呢称弹窗 -->
    <van-popup
      v-model="nickname"
      round
      closeable
      close-icon="close"
      close-icon-position="close"
      position="bottom"
      :style="{ height: '30%' }"
      class="popup"
    >
      <van-button
        round
        type="info"
        size="small"
        calss="van-button"
        @click="setUser({ nickname: newnickname })"
        >确认</van-button
      >
      <van-field
        v-model="newnickname"
        placeholder="请输入新的呢称"
        class="field"
      />
    </van-popup>
    <!-- 密码弹窗 -->
    <van-popup
      v-model="password"
      round
      closeable
      close-icon="close"
      close-icon-position="close"
      position="bottom"
      :style="{ height: '30%' }"
      class="popup"
    >
      <van-button
        round
        type="info"
        size="small"
        calss="van-button"
        @click="setUser({ password: newpassword })"
        >确认</van-button
      >
      <van-field
        v-model="newpassword"
        placeholder="请输入新的密码"
        class="field"
      />
    </van-popup>
    <!-- 性别选择弹窗 -->
    <van-action-sheet v-model="gunder" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
import headerComponent from "@/components/HeaderCompon";
import options from "@/components/Options";

export default {
  components: {
    headerComponent,
    options
  },
  data() {
    return {
      list: [],
      nickname: false,
      password: false,
      newnickname: "",
      newpassword: "",
      newgunder: "",
      gunder: false,
      actions: [{ name: "先生" }, { name: "小姐" }]
    };
  },
  mounted() {
    this.$axios({
      url: "/user/" + localStorage.getItem("userId"),
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token")
      }
    }).then(res => {
      this.list = res.data.data;
    });
  },
  methods: {
    // 修改呢称和密码
    setUser(newdata) {
      if (this.newpassword || this.newnickname) {
        this.$axios({
          url: "/user_update/" + localStorage.getItem("userId"),
          method: "post",
          data: newdata
        }).then(res => {
          console.log(res);
          this.list = res.data.data;
          this.$toast(res.data.message);
        });
        this.password = false;
        this.newpassword = "";
        this.nickname = false;
        this.newnickname = "";
      } else if (this.newpassword == "") {
        this.$toast.fail("请输入新密码");
        return;
      } else if (this.newnickname == "") {
        this.$toast.fail("请输入新呢称");
        return;
      }
    },
    // 修改性别
    onSelect(item) {
      this.gunder = false;
      if (item.name == "先生") {
        this.newgunder = 1;
      } else {
        this.newgunder = 0;
      }
      this.$axios({
        url: "/user_update/" + localStorage.getItem("userId"),
        method: "post",
        data: {
          gender: this.newgunder
        }
      }).then(res => {
        this.list = res.data.data;
        this.$toast("修改成功");
      });
      this.show = false;
      this.$toast(item.name);
    },
    afterRead(fileObj) {
      // 此时可以自行将文件上传至服务器
      var formData = new FormData();
      formData.append("file", fileObj.file);
      this.$axios({
        url: "/upload",
        data: formData,
        method: "post"
      }).then(res => {
        console.log(res);
        const { mseeage, data } = res.data;
        if (res.data.message == "文件上传成功") {
          this.$axios({
            url: "/user_update/" + localStorage.getItem("userId"),
            method: "post",
            data: {
              head_img: data.url
            }
          }).then(res => {
            console.log(res);
            this.list = res.data.data;
            this.$toast("修改成功");
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  height: 69.444vw;
  overflow: hidden;
  .bg {
    height: 100%;
    filter: blur(2.778vw);
    text-align: center;
    img {
      height: 100%;
    }
  }
  .bg-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
  }
  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20vw;
    text-align: center;
    .avatar {
      width: 27.778vw;
      // height: 27.778vw;
      border-radius: 50%;
    }
  }
}
.popup {
  box-sizing: border-box;
  padding: 2.778vw;
  .van-button {
    right: 2.222vw;
    top: 1.944vw;
    position: absolute;
  }
  .field {
    top: 11.111vw;
    left: 0vw;
    height: 11.111vw;
    position: absolute;
  }
}
.van-uploader {
  position: absolute;
  top: 23.611vw;
  left: 26.389vw;
  opacity: 0;
}
</style>